<template>
	<view class="app">
		<view class="price-box">
			<text>支付金额</text>
			<text class="price">{{ money |formatPrice }}</text>
		</view>
		<view class="cu-list menu margin-top" v-if="payTypeList.length">
			<view class="cu-item" v-for="(item,index) in payTypeList" :key="index">
				<view class="content">
					<image :src="item.image" class="png" mode="aspectFit"></image>
					<!-- <text class="text-grey">{{item.method_name}}</text> -->
				</view>
				<view class="action">
					<radio class='green margin-left-sm' @tap="changePaymentType(item,index)" :class="radio===index?'checked':''" :checked="radio===index?'checked':''" :value="item.plugin_id" ></radio>
				</view>
			</view>
		</view>	
		<view class="padding margin-top" v-if="payTypeList.length">
			<button class="confirm-btn bg-theme lg radius" :disabled="btnLoading" :loading="btnLoading" @tap="confirm">确认支付</button>
		</view>
	</view>
</template>

<script>
	import * as Pay_API from '@/api/pay.js'
	let client_type = 'NATIVE'
    export default {
        data() {
            return {
                payType: 5,
                payTypeList: {},
                money: 0.00,
                userInfo: {},
                orderDetail: {},
                orderInfo: {},
                btnLoading: false,
				radio:0,
				plugin_id:'weixinPayPlugin',
				needPay:true,
				sn:uni.getStorageSync('paymentOrder').trade_sn,
				trade_type:uni.getStorageSync('buylist').type
            };
        },
		watch:{
			payTypeList(newVal){
				this.payTypeList = newVal
			}
		},
        onLoad(options) {
			if(options.amount){
				this.money = parseFloat(options.amount)
				this.sn = options.sn
			}
           this.initData(options)
        },
		onBackPress() {
			this.clearPaymentOrder()
		},
		filters:{
			formatPrice(price) {
			  if (typeof price !== 'number') return price
			  return String(Number(price).toFixed(2)).replace(/\B(?=(\d{3})+(?!\d))/g, ',')
			}
		},
        methods: {
            // 数据初始化
            async initData(options) {
				this.getPayTypeList()
            },
            //选择支付方式
            // changePayType(type) {
            //     this.payType = type;
            // },
			changePaymentType(item,index){
				this.radio = index
				this.plugin_id = item.plugin_id
			},
            // 获取订单费用
            async getOrderDetail(id) {
                
            },
			// 检查是否需要支付
			async izPayCheck() {
				let sn = uni.getStorageSync('buylist').sn
				Pay_API.PayCheck(sn).then(res =>{
				   // console.log('需要支付===>',res)
				   this.needPay = true
			   })
			},
            // 获取支付类型列表
            async getPayTypeList() {
               Pay_API.PaymentMethod(client_type).then(res =>{
				   this.payTypeList = res
			   })
            },
            //确认支付
            async confirm() {
				let params = {
					payment_plugin_id:this.plugin_id,
					pay_mode:'normal',
					client_type:client_type
				}
				// let trade_type = this.trade_type==='cart'? 'order':'trade'
				let trade_type = 'order'
                Pay_API.Pay(trade_type,this.sn,params).then(res =>{
					uni.requestPayment({
						provider: 'wxpay',
						timeStamp: res.res.timeStamp,
						nonceStr: res.res.nonceStr,
						package: res.res.package,
						signType: 'MD5',
						paySign: res.res.sign,
						success: res=> {
							uni.showToast({
								title: "支付成功",
								duration: 2000,
								icon: 'none'
							});
							this.clearPaymentOrder()
							uni.redirectTo({
								url:'./success'
							})
						},
						fail: err=> {
							if(err.errMsg === 'requestPayment:fail cancel'){
								uni.showToast({
									title: "已取消支付",
									icon: 'none'
								});
							}else{
								uni.showModal({
									content: "支付失败,原因为:\n " + err.errMsg,
									showCancel: false,
								})
							}
						}
					});			
				}).catch((rej)=>{
					uni.showToast({
						icon:'none',
						title:'交易支付发起失败'
					})
				})
            },
			clearPaymentOrder(){
				uni.removeStorage({
					key: 'paymentOrder',
					success: (res)=>{
						this.paymentOrder = []
					}
				})
			},
			
        },
		beforeDestroy() {
			this.clearPaymentOrder()
		}
    }
</script>

<style lang='scss' scoped>
	page {
		background-color: $background-container;
	}
	.payIcon{
		width: 200rpx;
		height:120rpx;
	}
	.app {
		width: 100%;
	}
	.price-box {
		background-color: #fff;
		height: 265upx;
		display: flex;
		flex-direction: column;
		justify-content: center;
		align-items: center;
		font-size: 28upx;
		color: #909399;
		.price {
			font-size: 50upx;
			color: #303133;
			margin-top: 12upx;
			&:before {
				content: '￥';
				font-size: 40upx;
			}
		}
	}
	/deep/.cu-list.menu>.cu-item .content>image {
		width: 8em;
		height: 2em;
	}
</style>
